<template>
    <u-tabbar v-if="showTabbar" v-model="current" :style="tabbarStyle" :list="tabbarList" @change="handleChange" :hide-tab-bar="false"></u-tabbar>
</template>

<script>
import { mapState } from 'vuex';
import {navigateTo} from '@/utils/util'
export default {
  props: {
    item: {
      type: Object,
      default() {
        return {};
      }
    },
    newsId: {
      type: String,
      default: ''
    }
  },

  computed: {
    ...mapState(['config']),
    tabbarList() {
      return this.config.tabbar.map(item => {
        return {
          iconPath: item.unselected,
          selectedIconPath: item.selected,
          text: item.name,
          link: item.link,
          pagePath: item.link.path
        };
      });
    },
    showTabbar() {
      const currentPages = getCurrentPages();
      const currentPage = currentPages[currentPages.length - 1];
      const current = this.tabbarList.findIndex(item => {
        return item.pagePath === '/' + currentPage.route;
      });
      return current >= 0;
    },
    tabbarStyle() {
      return {
        activeColor: this.config.style.selected_color,
        inactiveColor: this.config.style.default_color
      };
    }
  },
  methods: {
    handleChange(index) {
      const selectTab = this.tabbarList[index];
      console.log(selectTab);
      navigateTo(selectTab.link, 'reLaunch')
    }
  }
};
</script>
